إضافة زر إجراء عائم

تجربة طريقة ComposeAllowed
Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية إضافة مكونات في Compose.
زر الإجراء العائم ←

زر الإجراء العائم (FAB) هو زر دائري يشغّل الإجراء الأساسي في واجهة مستخدم تطبيقك. توضح لك هذه الصفحة كيفية إضافة زر الإجراء الرئيسي (FAB) إلى التنسيق، وتخصيص بعض مظهره، والاستجابة لنقرات الأزرار.

لمعرفة المزيد من المعلومات حول كيفية تصميم زر إجراء عائم في تطبيقك وفقًا لإرشادات التصميم المتعدد الأبعاد، يمكنك الاطّلاع أيضًا على الأزرار: زر الإجراءات العائم.

الشكل 1. زر إجراء عائم

إضافة زر الإجراء العائم إلى التنسيق

يوضّح الرمز التالي كيفية ظهور FloatingActionButton في ملف التنسيق: 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

يتم تلوين زر الإجراء الرئيسي (FAB) بشكل تلقائي من خلال السمة colorAccent، التي يمكنك تخصيصها باستخدام لوحة ألوان المظهر.

يمكنك ضبط مواقع FAB أخرى باستخدام سمات XML أو الطرق المقابلة لها، مثل ما يلي:

  • تمثّل هذه السمة حجم زر الإجراء الرئيسي باستخدام السمة app:fabSize أو الطريقة setSize().
  • تعرض هذه السمة لون التموج في دالة FAB باستخدام السمة app:rippleColor أو الطريقة setRippleColor().
  • تعرض هذه السمة رمز الإجراء الرئيسي (FAB) باستخدام السمة android:src أو الطريقة setImageDrawable().

الاستجابة لنقرات الأزرار

يمكنك بعد ذلك تطبيق علامة View.OnClickListener لمعالجة عمليات النقر على زر الإجراء الرئيسي (FAB). على سبيل المثال، يعرض الرمز التالي Snackbar عندما ينقر المستخدم على زر الإجراء الرئيسي (FAB):

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

لمزيد من المعلومات حول إمكانات زر الإجراء الرئيسي (FAB)، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ FloatingActionButton.